<template>
    <div class="goods">
          <div class="goodsImage">
              <img src="../../../assets/images/4.jpg" alt="" class="goodsPhoto">
          </div>
          <div class="intro">
              <div>
                  <div class="name">{{ item.name }}</div>
                  <div class="sales_volume">已售{{ item.exsale }}</div>
                  <div class="discount">{{ item.discount }}折！</div>
                  <div class="price">￥{{ item.price }}</div>
              </div>
          </div>
          <div class="button">
              <div class="minus_button" v-show="isShow">
                  <MinusButton @click="minus"/>
              </div>
              <div>
                  <input type="text" v-model="sum" v-show="isShow">
              </div>
              <div class="add_button">
                  <AddButton @click="add"/>
              </div>
          </div>
      </div>
</template>

<script>
import{computed, onMounted, ref, defineComponent, reactive, watch, onBeforeUnmount, nextTick, toRaw } from 'vue'
import AddButton from './Button/AddButton.vue'
import MinusButton from './Button/MinusButton.vue'
export default defineComponent({
    name:'MarketGoods',
    components:{AddButton,MinusButton},
    props:['item'],
    setup(props,{emit}){
        
        //遍历传来的数据
        const item = props.item
        let sum = computed(()=>{
            return item.selectSum
        })

        //没选商品则只显示加号
        let isShow = computed(()=>{
            if(sum.value>0){
                return true
            }
            return false
        })

        //添加
        function add(){
            emit('add',item.id)
        }
        //减少
        function minus(){
            if(item.selectSum>0){    //有物品才能减少
                emit('minus',item.id)
            }
        }
        
        return {
            sum,item,isShow,add,minus
        }
        
    }
})
</script>

<style scoped>
    .goods {
        width: 49%;
        display: flex;
        position: relative;
        background-color: rgb(237, 224, 224);
        border-radius: 5px;
        min-width: 100px;
    }
    .goodsImage {
        width: 50%;
        margin: 10px;
    }
    .goodsPhoto {
        height: auto;
        width: 100%;
        border: 3px solid white;
    }
    .intro {
        margin: 20px;
    }
    .add_button {
        position: absolute;
        bottom: 15px;
        right: 10px;
    }
    .minus_button {
        position: absolute;
        bottom: 15px;
        right: 70px;
    }
    input {
        position: absolute;
        bottom: 15px;
        right: 43px;
        border: none;
        width: 10px;
        background-color: transparent;
    }
</style>